<template>
	<view class="container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<text class="title">忆思德智能助手</text>
			<text class="subtitle">专业的AI助手，为您提供全方位服务</text>
		</view>

		<!-- 发布智能体卡片 -->
		<view class="publish-card" @click="handlePublish">
			<view class="publish-left">
				<image class="publish-icon" src="/static/logo.png" mode="aspectFill" />
				<view class="publish-content">
					<text class="publish-title">发布智能体</text>
					<text class="publish-desc">简单快捷，一键"变"成小程序</text>
				</view>
			</view>
			<text class="publish-arrow">></text>
		</view>
		<!-- 智能体列表 -->
		
		<uni-section title="我发布的智能体" type="line"></uni-section>
		<view class="agent-grid" v-if="agents">
			<Agent v-for="(agent,index) in agents" :key="index" :agent="agent" @selectAgent="goAgentSetting"></Agent>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		computed,
		ref
	} from 'vue'

	import {
		aiApi
	} from '@/utils/api'
	import Agent from "@/components/Agent/Agent.vue";

	onMounted(() => {
		getAgentList()
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage']
		});
	})
	const goAgentSetting=(agent)=>{
		uni.navigateTo({
			url:'/pages/admin/agentSetting/agentSetting?id='+agent.id
		})
	}


	const getAgentList = async () => {
		const agentList = await aiApi.getAiList()
		agents.value = agentList.data
	}
	const agents = ref([])


	const handlePublish = () => {
		uni.navigateTo({
			url: '/pages/publish/publish'
		})
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #e8f7f7 0%, #ffffff 50%);
		padding: 40rpx 30rpx;
	}

	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}

	.agent-grid {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.agent-card {
		padding: 30rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.agent-card:active {
		transform: scale(0.98);
	}

	.agent-card.premium {
		background: linear-gradient(45deg, #ffffff, #f0f9f6);
		border: 1px solid rgba(61, 192, 124, 0.1);
	}

	.agent-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.agent-avatar {
		width: 100rpx;
		height: 100rpx;
		object-fit: cover;
		box-sizing: border-box;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.agent-meta {
		flex: 1
	}

	.name-wrap {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}

	.agent-name {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.premium-tag {
		background: rgba(255, 215, 0, 0.1);
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}

	.agent-desc {
		font-size: 26rpx;
		color: #666;
		display: block;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.agent-stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		font-size: 24rpx;
		color: #999;
	}

	.input-section {
		position: relative;
		margin: 20rpx 0 40rpx;
	}

	.vid-input {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 120rpx 0 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.placeholder-style {
		color: #999;
	}

	.arrow-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 80rpx;
		height: 80rpx;
		background: #00C853;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}

	.publish-card {
		margin: 20rpx 0;
		padding: 60rpx 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.publish-left {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.publish-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 24rpx;
		border: 4rpx solid #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.publish-content {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.publish-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.publish-desc {
		font-size: 28rpx;
		color: #999;
	}

	.publish-arrow {
		color: #CCCCCC;
		font-size: 36rpx;
		margin-right: 10rpx;
	}
</style>